<!--
 * @author: 十一
 * @since: 2024-06-16
 * index.vue
 * @desc: new page
-->
<template>
  <el-row :gutter="20">
    <el-col :span="3">
      <div class="classify-group">
        <div
          class="classify-item"
          v-for="item in classifyList"
          :key="item.id"
          @mouseover="handleMouseover(item)"
          @mouseout="handleMouseout(item)"
          :class="{ 'hover-class': item.isHovering }"
          @click="handleClick(item)"
        >
          <div>{{ item.title }}</div>
        </div>
      </div>
    </el-col>
    <el-col :span="21">
      <div class="resource-content">
        <el-card
          style="border: none"
          v-for="item in classifyList"
          class="mb-5"
          :id="item.id"
        >
          <div class="mb-5">
            <el-divider
              direction="vertical"
              style="border-width: 2px; border-color: #30e4c4"
            />
            {{ item.title }}
          </div>
          <el-row :gutter="15">
            <el-col
              :span="6"
              v-for="children in item.resourceList"
              :key="children.id"
              style="border: none"
            >
              <a
                class="children-card-content"
                :href="children.link"
                target="_blank"
              >
                <el-card
                  :style="{ background: children.background }"
                  class="mb-1 children-card"
                  @mouseover="handleMouseover(children)"
                  @mouseout="handleMouseout(children)"
                  :class="{ 'hover-resource-class': children.isHovering }"
                >
                  <img :src="children.thumbnail" alt="" />
                </el-card>

                <div class="title">{{ children.title }}</div>
                <div class="description mb-5">
                  <el-tooltip placement="top" :content="children.description">
                    {{ children.description }}
                  </el-tooltip>
                </div>
              </a>
            </el-col>
          </el-row>
        </el-card>
      </div>
    </el-col>
  </el-row>
</template>

<script lang="ts" setup>
let classifyList = ref([]);
let resourceData = ref([]);
const data: any = await useServerRequest(
  "get-classification-list/",
  {
    query: { page_size: 10, page: 1, total: 0, type: 0 },
  },
  { method: "get" }
);

data.results.forEach((item: any) => {
  item.isHovering = false;
});
classifyList.value = data.results;

const resourceResponse: any = await useServerRequest(
  "get-resource-list/",
  {
    query: { page_size: 1000, page: 1 },
  },
  { method: "get" }
);
classifyList.value.forEach((item: any) => {
  item.resourceList = resourceResponse.results.filter((resourceItem: any) => {
    if (resourceItem.category === item.id) {
      resourceItem.isHovering = false;
      resourceItem.background = getRandomGradientStyle();
      return resourceItem;
    }
  });
});

resourceData.value = resourceResponse.results;

const handleMouseover = (item: any) => {
  item.isHovering = true;
};
const handleMouseout = (item: any) => {
  item.isHovering = false;
};
const handleClick = (item: any) => {
  let anchorEl: any = document.getElementById(item.id);
  anchorEl.scrollIntoView({ behavior: "smooth" });
};
function getRandomColor() {
  const letters = "0123456789ABCDEF";
  let color = "#";
  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

function getRandomGradientStyle() {
  const color1 = getRandomColor();
  const color2 = getRandomColor();
  return `linear-gradient(to right, ${color1}, ${color2})`;
}
</script>

<style scoped lang="scss">
.classify-group {
  background: #ffffff;
  border-radius: 10px;
  .classify-item {
    line-height: 60px;
    text-align: center;
    border-bottom: 1px solid #f1f3f7;
    font-size: 14px;
    color: #999999;
    cursor: pointer;
  }
}
.hover-class {
  text-decoration: none;
  font-size: 16px;
  color: #000000;
  background-repeat: no-repeat;
  background-position: center 78px;
  box-shadow: 0 30px 28px -18px rgba(0, 0, 0, 0.26);
  transform: translate(0, -4px);
  transition: 0.5s;
  font-size: 18px !important;
  color: #30e4c4 !important;
}
.resource-content {
  height: calc(100vh - 130px);
  overflow-y: scroll;
  cursor: pointer;
  .title {
    color: #171717;
  }
  .description {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #bcbcbc;
    font-size: 12px;
  }
}
::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.children-card {
  border: none;
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  .children-card-content {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
  }

  img {
    width: 50px;
    border-radius: 10px;
  }
}
.hover-resource-class {
  background-repeat: no-repeat;
  background-position: center 78px;
  box-shadow: 0 30px 28px -18px rgba(0, 0, 0, 0.26);
  transform: translate(0, -4px);
  transition: 0.5s;
  img {
    transform: rotate(30deg);
    transition: 0.5s;
  }
}
</style>
